<template>
	<view>
		<navigationBar navigationTitle="首页" />
		<!-- <navigationBar :backType="2" navigationTitle="首页" /> -->

		<view class="wrap paddingBottom">
			<banner :bannerList="bannerList" />

			<view class="authen-bg">
				<authenInfo :showType="1" />
			</view>

			<view class="wrap-list">
				<headLine title="推荐项目" />

				<projectList :list="list" />
			</view>
		</view>

		<tabBar :current="0" />
	</view>
</template>

<script>
	import tabBar from "@/subPages/components/technician/tabBar/tabBar.vue";
	import banner from "@/subPages/components/technician/banner/banner.vue";
	import authenInfo from "@/subPages/components/technician/authenInfo/authenInfo.vue";
	import headLine from "@/subPages/components/technician/headLine/headLine.vue";
	import projectList from "@/subPages/components/technician/projectList/projectList.vue";
	import { serviceIndex } from "@/API/technician.js";

	export default {
		components: {
			tabBar,
			banner,
			authenInfo,
			headLine,
			projectList,
		},
		data() {
			return {
				bannerList: [],

				page: 1,
				total: 0,
				list: [],
			};
		},
		onLoad() {
			if (this.$filters.isLogin()) {
				this.getData();
			}
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},

		methods: {
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.bannerList = [];
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				serviceIndex(this.page).then((res) => {
					this.total = res.data.service.total;
					const list = res.data.service.data;
					if (this.page === 1) {
						this.bannerList = res.data.banner;
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap {
		--bottom-height: 120rpx;

		.authen-bg {
			width: 100%;
			height: 76rpx;
			background-color: white;
			padding: 0 15rpx;
			box-sizing: border-box;
			overflow: hidden;
		}

		.wrap-list {
			margin-top: 20rpx;
			width: 100%;
			overflow: hidden;
		}
	}
</style>
